<template>
	<view class="content">

		<z-paging ref="paging" bgColor="#29313c" @query="getList" v-model="list" :loading-more-enabled="false">
			<view slot="top">
				<!-- #ifdef APP -->
				<NavBarCommon></NavBarCommon>
				<!-- #endif -->
				<view class="recordBox">
					<image src="/static/home/right.png" alt="" class="left" @click="goBackTwo" />
					<view class="record">{{ $t('Releaserecord') }}</view>
				</view>
			</view>
			<view class="recordOne">
				<view class="numberOne" v-if="list.length != 0">
					<view class="number1"> {{$t('count')}} </view>
					<view class="address1"> {{$t('address')}} </view>
					<view class="time1"> {{$t('time')}} </view>
				</view>
				<view class="addressOne" v-for="(item, index) in list" :key="index">
					<view class="number2 flex">
						<view class="number2-text">{{ item.amount }}</view>
						<view style="font-size: 12px;">NASY</view>
					</view>
					<view class="address2">{{ formatPublicKey(item.recipient) }}</view>
					<view class="time2">{{ formatTime(item.created_at) }}</view>
				</view>
				<u-empty v-if="list.length == 0" text='no Data'></u-empty>
			</view>

		</z-paging>


	</view>
</template>

<script>
import {
	getTransactionsList
} from '@/api/index.js'
export default {
	data() {
		return {
			list: [],
			type: 0
		};
	},
	methods: {
		formatTime(inputTime) {
			// 创建 Date 对象
			const date = new Date(inputTime);

			// 获取年份、月份、日期、小时和分钟
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的，所以下个月份加1
			const day = String(date.getDate()).padStart(2, '0');
			const hour = String(date.getHours()).padStart(2, '0');
			const minute = String(date.getMinutes()).padStart(2, '0');
			const formattedDate = `${year} ${month}-${day} ${hour}:${minute}`;
			return formattedDate
		},
		// 方法用于格式化 publicKey 的显示
		formatPublicKey(key) {
			if (!key) return "";
			const start = key.slice(0, 4);
			const end = key.slice(-4);
			return `${start}...${end}`;
		},
		async getList() {
			let address = uni.getStorageSync('walletAddress')
			let type = this.type
			let data = {
				address,
				type
			}
			let res = await getTransactionsList(data)
			if (res.data) {
				this.$refs.paging.complete(res.data.transactions);
			}
		},
		goBackTwo() {
			uni.navigateBack({})
		},
	},
	onLoad(options) {
		if (options.type) {
			this.type = options.type
		}

	},
	onShow() {
	}
};
</script>

<style scoped lang="scss">
.recordBox {
	// width: 100%;
	height: 130rpx;
	// background: #1f2630;
	// display: flex;
	// align-items: center;

	
	background: #1f2630;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;

	.left {
		position: absolute;
		left: 2%;
		width: 22rpx;
		height: 38rpx;
		// margin-left: 28rpx;
	}

	.record {
		font-weight: 500;
		font-size: 36rpx;
		color: #ffffff;
		// margin-left: 250rpx;
	}
}

.recordOne {
	width: 100%;
	height: calc(100vh - 100rpx);
	background: #29313c;
	padding-top: 31rpx;

	.numberOne {
		display: flex;
		align-items: center;
		font-weight: 300;
		font-size: 24rpx;
		color: #999999;

		.number1 {
			margin-left: 48rpx;
		}

		.address1 {
			margin-left: 229rpx;
		}

		.time1 {
			margin-left: 229rpx;
		}
	}

	.addressOne {
		display: flex;
		align-items: center;
		margin-top: 38rpx;
		justify-content: space-between;
		margin-left: 30rpx;
		margin-right: 30rpx;


		.number2 {
			width: 180rpx;
			font-weight: 300;
			font-size: 36rpx;
			color: #ffffff;
			display: flex;
			align-items: end;

			.number2-text {
				// width: 100rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			// margin-left: 48rpx;
		}

		.address2 {
			font-weight: 300;
			font-size: 36rpx;
			color: #ffffff;
			// margin-left: 65rpx;
		}

		.time2 {
			font-weight: 300;
			font-size: 24rpx;
			color: #ffffff;
			// margin-left: 85rpx;
		}
	}
}
</style>